function $(selector) {
    return document.querySelector(selector);
}
var container = $(".container");
var chessBoard = $(".chessBoard");
var isGameOver = false;
var whichColor = "white";
var chessArr = [];

/*初始化棋盘格子 */
function initChessboard() {
    var re = "";
    for (let i = 0; i < 14; i++) {
        /* 创建行 */
        var row = '<tr>'
        for (let j = 0; j < 14; j++) {
            /* 创建列 */
            row += `<td data-row="${i}" data-line="${j}"></td>`
        }
        row += '</tr>';
        re += row;
    }
    chessBoard.innerHTML = re;
}

/* 绑定点击事件*/
function bandEvent() {
    chessBoard.onclick = function (e) {
        // console.log(e.target);输出td单元格
        // console.log(e.currentTarget);输出table表格
        if (!isGameOver) {
            /* 游戏没结束---落子 */
            var temp = Object.assign({}, e.target.dataset);
            //Object.assign:混合对象
            //e.target.dataset:自定义属性值，对象形式


            if (e.target.nodeName === 'TD') {
                var tdWidth = container.clientWidth * 0.92 / 14;
                /* 🔔确认棋子落在哪个角 */
                var positionX = e.offsetX > tdWidth / 2;
                var positionY = e.offsetY > tdWidth / 2;

                //棋子信息
                var chessPoint = {
                    x: positionX ? parseInt(temp.line) + 1 : parseInt(temp.line),
                    y: positionY ? parseInt(temp.row) + 1 : parseInt(temp.row),
                    c: whichColor
                }
                /* 渲染棋子 */
                chessRender(chessPoint);

            }
        } else {
            /* 游戏结束---是否重开？ */
            if (window.confirm("重新开一局吗？")) {
                chessArr = [];
                initChessboard();
                isGameOver = false;
            }
        }

    }
}

function chessRender(chessPoint) {
    /* 判断落点是否已经有棋子 */
    if (exist(chessPoint) && !isGameOver) {
        chessArr.push(chessPoint);
        //创建一个棋子
        var newChess = `<div class="chess ${chessPoint.c}" data-row="${chessPoint.y}" data-line="${chessPoint.x}"></div>`;
        //调整棋子位置
        if (chessPoint.x < 14 && chessPoint.y < 14) {
            //属性选择器
            var tdPos = $(`td[data-row='${chessPoint.y}'][data-line='${chessPoint.x}']`);
            tdPos.innerHTML += newChess;
        }
        // x 等于 14，说明是最右侧那条线
        if (chessPoint.x === 14 && chessPoint.y < 14) {
            var tdPos = $(`td[data-row='${chessPoint.y}'][data-line='13']`);
            tdPos.innerHTML += newChess;
            tdPos.lastChild.style.left = '50%';
        }

        // y 等于 14，说明是最下侧那条线
        if (chessPoint.x < 14 && chessPoint.y === 14) {
            var tdPos = $(`td[data-row='13'][data-line='${chessPoint.x}']`);
            tdPos.innerHTML += newChess;
            tdPos.lastChild.style.top = '50%';
        }

        // x 和 y 均等于 14，说明是最右下角的那个 td
        if (chessPoint.x === 14 && chessPoint.y === 14) {
            var tdPos = $(`td[data-row='13'][data-line='13']`);
            tdPos.innerHTML += newChess;
            tdPos.lastChild.style.top = '50%';
            tdPos.lastChild.style.left = '50%';
        }

        //颜色切换
        whichColor = whichColor === 'white' ? 'black' : 'white'

    }
    /* 检查是否游戏结束 */
    check();
}

function exist(chessPoint) {
    var result = chessArr.find(item => item.x === chessPoint.x && item.y === chessPoint.y)
    return result === undefined ? true : false;
}

function check() {
    // 其实就是遍历数组里面的每一个棋子
    // 这里分为 4 种情况：横着、竖着、斜着（2 种）
    for (let i = 0; i < chessArr.length; i++) {
        var curChess = chessArr[i];
        var chess2, chess3, chess4, chess5;
        // 检查有没有横着的 5 个颜色一样的棋子
        chess2 = chessArr.find(function (item) {
            return curChess.x === item.x + 1 && curChess.y === item.y && curChess.c === item.c;
        })
        chess3 = chessArr.find(function (item) {
            return curChess.x === item.x + 2 && curChess.y === item.y && curChess.c === item.c;
        })
        chess4 = chessArr.find(function (item) {
            return curChess.x === item.x + 3 && curChess.y === item.y && curChess.c === item.c;
        })
        chess5 = chessArr.find(function (item) {
            return curChess.x === item.x + 4 && curChess.y === item.y && curChess.c === item.c;
        })

        if (chess2 && chess3 && chess4 && chess5) {
            // 进入此 if，说明游戏结束
            end(curChess, chess2, chess3, chess4, chess5);
        }


        // 检查有没有竖着的 5 个颜色一样的棋子
        chess2 = chessArr.find(function (item) {
            return curChess.x === item.x && curChess.y === item.y + 1 && curChess.c === item.c;
        })
        chess3 = chessArr.find(function (item) {
            return curChess.x === item.x && curChess.y === item.y + 2 && curChess.c === item.c;
        })
        chess4 = chessArr.find(function (item) {
            return curChess.x === item.x && curChess.y === item.y + 3 && curChess.c === item.c;
        })
        chess5 = chessArr.find(function (item) {
            return curChess.x === item.x && curChess.y === item.y + 4 && curChess.c === item.c;
        })
        if (chess2 && chess3 && chess4 && chess5) {
            // 进入此 if，说明游戏结束
            end(curChess, chess2, chess3, chess4, chess5);
        }

        // 检查有没有斜着的 5 个颜色一样的棋子
        chess2 = chessArr.find(function (item) {
            return curChess.x === item.x + 1 && curChess.y === item.y + 1 && curChess.c === item.c;
        })
        chess3 = chessArr.find(function (item) {
            return curChess.x === item.x + 2 && curChess.y === item.y + 2 && curChess.c === item.c;
        })
        chess4 = chessArr.find(function (item) {
            return curChess.x === item.x + 3 && curChess.y === item.y + 3 && curChess.c === item.c;
        })
        chess5 = chessArr.find(function (item) {
            return curChess.x === item.x + 4 && curChess.y === item.y + 4 && curChess.c === item.c;
        })
        if (chess2 && chess3 && chess4 && chess5) {
            // 进入此 if，说明游戏结束
            end(curChess, chess2, chess3, chess4, chess5);
        }

        // 检查有没有斜着的 5 个颜色一样的棋子
        chess2 = chessArr.find(function (item) {
            return curChess.x === item.x - 1 && curChess.y === item.y + 1 && curChess.c === item.c;
        })
        chess3 = chessArr.find(function (item) {
            return curChess.x === item.x - 2 && curChess.y === item.y + 2 && curChess.c === item.c;
        })
        chess4 = chessArr.find(function (item) {
            return curChess.x === item.x - 3 && curChess.y === item.y + 3 && curChess.c === item.c;
        })
        chess5 = chessArr.find(function (item) {
            return curChess.x === item.x - 4 && curChess.y === item.y + 4 && curChess.c === item.c;
        })
        if (chess2 && chess3 && chess4 && chess5) {
            // 进入此 if，说明游戏结束
            end(curChess, chess2, chess3, chess4, chess5);
        }
    }
}

function end() {
    if (!isGameOver) {
        isGameOver = true;
        //标出所有棋子顺序
        for (let i = 0; i < chessArr.length; i++) {
            $(`div[data-row='${chessArr[i].y}'][data-line='${chessArr[i].x}']`).innerHTML = i + 1;
        }
        // 2. 把获胜的棋子加上一个红色阴影
        for (var i = 0; i < arguments.length; i++) {
            $(`div[data-row='${arguments[i].y}'][data-line='${arguments[i].x}']`).classList.add('win');
        }
    }
}


function main() {

    /* 1.渲染单元格14×14 */
    initChessboard();

    /* 2.绑定事件，这里也就是点击事件 */
    bandEvent();
}
main();